<template>
	<view class="table">
		<view class="header" style="background-color: cornsilk; padding: 10rpx 20rpx; display: flex; justify-content: space-between">
			<view class="l">操作人员：<text @click="loginOut">{{ userInfo.syjrymz }}</text></view>
			<view class="r" style="font-size: 28rpx; text-decoration: underline" @click="reset_pwd">修改密码</view>
		</view>
		<view class="item">
			<view class="item_left">
				<view class="item_left_li" v-for="(item, index) in cateList" :key="index" :class="index == leftIndex ? 'active' : ''" @click="changeLeft(index)">
					{{ item.zzlbmz }}
				</view>
			</view>
			<view class="item_right">
				<view
					class="item_right_li"
					v-for="(item, index) in dataList"
					:key="index"
					:class="{
						kw: item.zzsysfs == '空位',
						fw: item.zzsysfs == '服务',
						yd: item.zzsysfs == '预订'
					}"
					@click="changeTab(item, index)"
				>
					<view class="title">{{ item.zzsysmz }}</view>
					<view class="desc" v-if="item.temp" style="color: red">{{ item.temp.rysl }}位</view>
					<view class="select" v-if="index == rightIndex">
						<u-icon name="checkmark"></u-icon>
					</view>
				</view>
				<view style="height: 130rpx"></view>
			</view>
		</view>
		<view class="footer" v-if="rightIndex != null">
			<view class="btn" @click="kt">开台</view>
			<!-- <view class="btn" @click="ht">换台</view> -->
			<view class="btn" @click="dc">点餐</view>
			<view class="btn" @click="order">我的账单</view>
			<view class="btn" @click="update_number">修改人数</view>
		</view>
		<u-modal :show="show" title="修改人数" :showConfirmButton="true" :showCancelButton="true" @cancel="show = false" @confirm="updateModal">
			<view class="slot-content" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
				<u--input placeholder="请输入人数" border="surround" v-model="number" type="number"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			leftIndex: 0,
			rightIndex: null,
			cateList: [],
			dataList: [],
			userInfo: [],
			show: false,
			number: ''
		};
	},
	onLoad() {
		this.getInfo();
		let userinfo = uni.getStorageSync('userInfo') || '';
		this.userInfo = userinfo;
	},
	methods: {
		updateModal(){
			let _this = this;
			let item = _this.dataList[_this.rightIndex];
			_this.$http('cate/updateCateNumber',{
				...item,
				number:_this.number
			}).then(res=>{
				if(res.code){
					this.show = false
					this.getData()
				}
			})
		},
		update_number() {
			let _this = this;
			let item = _this.dataList[_this.rightIndex];
			if (!item['temp']) {
				return _this.$u.toast(item.zzsysmz + '无法修改');
			}
			this.number = item.temp.rysl
			this.show = true;
		},
		reset_pwd() {
			uni.navigateTo({
				url: '/pages/reset_pwd/reset_pwd'
			});
		},
		changeTab(row, index) {
			let _this = this;
			if (row.zzsysfs == '预订') {
				_this.$u.toast('预定位置赞不可点餐');
				return;
			}
			this.rightIndex = index;
		},
		getInfo() {
			let _this = this;
			_this.$http('cate/getList').then((res) => {
				if (res.code) {
					_this.cateList = res.data;
					_this.getData();
				}
			});
		},
		getData() {
			let _this = this;
			_this
				.$http('cate/zzsys', {
					cate_id: _this.cateList[_this.leftIndex]['zzlbmz']
				})
				.then((res) => {
					if (res.code) {
						_this.dataList = res.data;
					}
				});
		},
		changeLeft(index) {
			this.leftIndex = index;
			this.getData();
		},
		kt() {
			let _this = this;
			let item = _this.dataList[_this.rightIndex];
			if (item['zzsysfs'] != '空位') {
				return _this.$u.toast(item.zzsysmz + '服务状态！无法开台');
			}
			uni.showLoading({
				title: '请稍后',
				mask: true
			});
			this.$http('cate/setzzsys', {
				zzmz: item.zzsysmz
			}).then((res) => {
				if (res.code) {
					uni.hideLoading();
					_this.dataList[_this.rightIndex]['zzsysfs'] = '服务';
				}
			});
		},
		dc() {
			let _this = this;
			let item = _this.dataList[_this.rightIndex];
			if (item['zzsysfs'] != '服务') {
				return _this.$u.toast(item.zzsysmz + '无法点餐');
			}
			this.$http('dish/getStatus',{
				zzmz:item.zzsysmz
			}).then(res=>{
				if(res.code){
					uni.navigateTo({
						url: '/pages/next/next?zzmz=' + item.zzsysmz
					});
				}else{
					_this.$u.toast(res.msg);
					return
				}
			})
			
		},
		order() {
			let _this = this;
			let item = _this.dataList[_this.rightIndex];
			uni.navigateTo({
				url: '/pages/order_detail/order_detail?zzmz=' + item.zzsysmz
			});
		},
		loginOut(){
			uni.showModal({
				showCancel:true,
				content:'您确定退出吗',
				success(btn) {
					if(btn.confirm){
						uni.clearStorage()
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	width: 100%;
	height: calc(100vh - var(--window-bottom));
	display: flex;
	flex-direction: row;
	&_left {
		width: 180rpx;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		align-items: center;
		&_li {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			width: 100%;
			text-align: center;
			border-bottom: 1rpx solid #ccc;
		}
		.active {
			background-color: #fff;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	&_right {
		flex: 1;
		grid-gap: 20rpx 20rpx;
		display: grid;
		grid-template-columns: auto auto auto;
		grid-auto-rows: 160rpx 160rpx;
		padding: 20rpx;
		.kw {
			background: #e8e7e7;
		}
		.fw {
			background: linear-gradient(45deg, #ff6700, orange) !important;
		}
		.yd {
			background-color: #8383f9;
			color: #fff;
		}
		&_li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			position: relative;
			.select {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom-right-radius: 10rpx;
				border-top-left-radius: 50%;
			}
		}
	}
}
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: end;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
	.btn {
		margin-bottom: 20rpx;
		background-color: #ff6700;
		width: max-content;
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		color: #fff;
		margin-left: 10rpx;
	}
}
</style>
